<template>
  <div class="page">
    <button @click="prev">操作1</button>
    <button @click="next">操作2</button>
    <div class="box">
      <div class="box-page" :class="['page' + index]" :style="item.style()" v-for="(item, index) in flip.list" :key="index">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
import { mat4, vec2, vec3 } from '../../libs/glmatrix/gl-matrix-min.js'
import { Tween, Easing } from '@tweenjs/tween.js'
export default {
  data() {
    return {
      flip: {
        current: 0,
        list: []
      }
    }
  },
  methods: {
    prev() {
      this.flip.current--
      this.goPage(this.flip.current)
    },
    next() {
      this.flip.current++
      this.goPage(this.flip.current)
    },
    goPage(page) {
      for (var i = 0; i < this.flip.list.length; i++) {
        if (i <= page) {
          this.flip.list[i].state = 2
        } else {
          this.flip.list[i].state = 1
        }
      }
    }
  },
  mounted() {
    let total = 10
    for (var i = 0; i <= total; i++) {
      this.flip.list.push({
        page: i,
        name: '操作-' + i,
        state: 0,
        matrix: {
          m1() {
            let obj = {
              transform: `translate3d(${this.page}px,0,${total - this.page}px)`
            }
            return obj
          },
          m2() {
            let obj = {
              transform: `translate3d(50px,0,0) translate3d(${this.page}px,0,${total - this.page}px)`
            }
            return obj
          },
          m3() {
            let obj = {
              transform: `rotatey(180deg) translate3d(50px,0,0) translate3d(${this.page}px,0,${total - this.page}px)`
            }
            console.log(obj)
            return obj
          }
        },
        style(state) {
          if (this.state == 0) {
            return this.matrix.m1.call(this)
          }
          if (this.state == 1) {
            return this.matrix.m2.call(this)
          }
          if (this.state == 2) {
            return this.matrix.m3.call(this)
          }
        }
      })
    }
  }
}
</script>
<style type="text/css" lang="scss">
.page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform-style: preserve-3d;
}
.box {
  width: 100px;
  height: 100px;
  margin: 100px auto;
  position: relative;
  transform-style: preserve-3d;
  &-page {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    box-sizing: border-box;
    position: absolute;
    background: #fff;
    left: 0;
    top: 0;
    transition: all 0.5s linear;
    &.page0 {
      background: grey;
    }
  }
}
</style>
